<template>
  <div class="create-article">
    <!-- 文章标题 -->
    <el-input
      v-model="articleForm.title"
      placeholder="请输入文章标题"
      style="margin-bottom: 20px"
    />

    <!-- 分类选择 -->
    <el-select
      v-model="articleForm.category_id"
      placeholder="请选择分类"
      style="margin-bottom: 20px"
    >
      <el-option
        v-for="category in categoryList"
        :key="category.id"
        :label="category.name"
        :value="category.id"
      />
    </el-select>

    <!-- 新增：标签输入 -->
    <div style="margin-bottom: 20px">
      <el-input
        v-model="tagsInput"
        placeholder="输入标签（逗号分隔，如：Vue,前端）"
        @keyup.enter.native="handleTagsInput"
        @blur="handleTagsInput"
      />
      <div style="margin-top: 8px">
        <el-tag
          v-for="(tag, index) in articleForm.tags"
          :key="index"
          type="info"
          closable
          @close="removeTag(index)"
        >
          {{ tag }}
        </el-tag>
      </div>
    </div>

    <!-- 富文本编辑器 -->
    <QuillEditor v-model="articleForm.content" @input="handleContentChange" />

    <!-- 提交按钮 -->
    <el-button type="primary" @click="submitArticle" style="margin-top: 20px">
      发布文章
    </el-button>
  </div>
</template>

<script>
import QuillEditor from "@/views/QuillEditor.vue";
import { postArticle, getCategoryList } from "@/api/index";

export default {
  components: { QuillEditor },
  data() {
    return {
      articleForm: {
        title: "",
        content: "",
        category_id: "",
        tags: [], // 新增：标签数组
      },
      categoryList: [],
      tagsInput: "", // 新增：临时输入的标签字符串
    };
  },
  methods: {
    handleContentChange(htmlContent) {
      this.articleForm.content = htmlContent;
    },
    // 新增：处理标签输入（按逗号分割并去重）
    handleTagsInput() {
      if (!this.tagsInput.trim()) return;
      const newTags = this.tagsInput
        .split(",")
        .map((t) => t.trim())
        .filter((t) => t && !this.articleForm.tags.includes(t)); // 去重
      this.articleForm.tags.push(...newTags);
      this.tagsInput = ""; // 清空输入框
    },
    // 新增：删除单个标签
    removeTag(index) {
      this.articleForm.tags.splice(index, 1);
    },
    async submitArticle() {
      // 校验新增：标签非空（可选，根据业务需求）
      if (this.articleForm.tags.length === 0) {
        this.$message.warning("建议至少添加一个标签");
        // return; // 若允许无标签发布，注释此行
      }
      // 调用接口时传递 tags 字段
      const res = await postArticle({
        title: this.articleForm.title,
        content: this.articleForm.content,
        category_id: this.articleForm.category_id,
        user_id: this.$store.state.user.id,
        tags: this.articleForm.tags, // 新增：传递标签数组
      });
      console.log(res);

      if (res.data.status === 0) {
        this.$message.success("文章保存成功");
        this.$router.push("/");
      } else {
        this.$message.error("文章保存失败：" + res.data.message);
      }
    },
  },
  async created() {
    const res = await getCategoryList();
    console.log(res);

    this.categoryList = res.data.data;
  },
};
</script>
